<script setup>
import {ref, defineProps} from 'vue'
import {ArrowDown, ArrowUp} from '@element-plus/icons-vue'
import router from '@/router/index.js'
import {humanizeNumber} from '@/utiles/format.js'
import {useUserInfoStore} from "@/stores/index.js";
import {postLike} from "@/utiles/userInfo.js";

const userInfoStore = useUserInfoStore()
const props = defineProps({
  post: {
    type: Object,
    required: true,
    default: () => ({
      id: 0,
      author: '',
      avatar: '',
      title: '',
      content: '',
      cover: 'https://picsum.photos/800/1600',
      tags: [],
      likes: 0,
      liked: false,
      expanded: false
    })
  }
})

const handlePostLike = (id, sign) => {
  console.log(id)
  postLike(Number(id),sign,props.post)
  //异步更新点赞数
  //重新获取帖子
}

//跳转至post页
const viewPost = (post) => {
  router.push({
    name: 'Post',
    params: {
      id: post.id,
    },
    query: {
      authorId: post.author.id,
      authorAvatar: post.author.avatar,
      authorName: post.author.name,
      authorIntroduced: post.author.introduced
    }
  })
}
//跳转至tag页
const viewTag = (tagName) => {
  router.push({
    name: 'SearchTag',
    query: {
      tagName: tagName
    }
  })
}
// 内容是否溢出状态
const expanded = ref(true)


</script>

<template>
  <div class="post-card">
    <!-- 作者信息 -->
    <div class="post-header">
      <el-avatar :size="40" :src="post.author.avatar"/>
      <span class="author-name"><router-link  :to="{ name: 'OtherUser', query: { userId: post.author.id} }">{{ post.author.nickname }}</router-link></span>
    </div>

    <div class="show">
      <div class="cover" v-if="post.cover!==''&&post.cover!== null">
        <img :src="post.cover" alt="封面">
      </div>
      <div class="content">
        <!-- 标题 -->
        <h2 class="post-title" @click="viewPost(post)" style="cursor: pointer">{{ post.title }}</h2>

        <!-- 内容 -->
        <div
          ref="contentRef"
          class="post-content"
          :class="{ 'expanded': expanded }"
          v-html="post.content"
        >
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <span class="expand-btn" v-if="expanded===true" @click="expanded= !expanded">
      展开
      <span class="icon"> <el-icon><ArrowDown/></el-icon></span>
    </span>
    <span class="expand-btn" v-if="expanded===false" @click="expanded= !expanded">
      收起
      <span class="icon"><el-icon><ArrowUp/></el-icon></span>
    </span>
    <!-- 标签 -->
    <div class="tags">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-tubiao_biaoqian"></use>
      </svg>
      <span @click="viewTag(tag)" v-for="(tag, tagIndex) in post.tags" :key="tagIndex" class="tag">
                   {{ tag }}
      </span>
    </div>

    <!-- 操作栏 -->
    <div class="post-actions">
      <span @click="viewPost(post)" class="post">查看原文</span>
      <span class="like">
          <svg class="icon" aria-hidden="true" @click="handlePostLike(props.post.id,0)"
                       v-if="!userInfoStore.postLike.includes(post.id)">
                    <use xlink:href="#icon-dianzan"></use>
                  </svg>
          <svg class="icon" aria-hidden="true" @click="handlePostLike(props.post.id,1)" v-else>
                    <use xlink:href="#icon-dianzanshoucang"></use>
                  </svg>
          <span class="num">{{humanizeNumber( post.likeCount)}}</span>
      </span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.post-card {
  width: 650px;
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .post-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .author-name {
      margin-left: 12px;
      font-weight: 500;
    }
    a {
      text-decoration: none;
      cursor: pointer;
      color: #636363;
    }
  }

  :deep(.post-content) img {
    width: 400px;
  }
  .show {
    .cover {
      float: left; /* 关键：向左浮动 */
      margin-top: 6px;
      margin-right: 20px;
      width: 200px;
      border-radius: 4px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .content {
      margin-top: -5px;

      .post-title {
        max-width: 350px;
        font-size: 20px;
        color: #303133;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .post-content {
        line-height: 1.8;
        color: #606266;
        margin-top: -10px;
        font-size: 15px;
        font-family: 'serif', '微软雅黑';
      }

      .expanded {
        display: -webkit-box; /* 弹性伸缩盒子模型 */
        -webkit-box-orient: vertical; /* 内容垂直排列 */
        -webkit-line-clamp: 6; /* 显示的最大行数 */
        overflow: hidden; /* 隐藏溢出内容 */
      }
    }

    /* 清除浮动 */
    .clearfix {
      clear: both;
      content: "";
      display: table;
    }
  }

  .expand-btn {
    color: #7a7a7a;
    cursor: pointer;
    font-size: 14px;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #e6e5e5;

    .icon {
      height: 20px;
      width: 20px;
      margin-top: 2px;
      margin-right: 5px;
    }

    .tag {
      padding: 0 3px;
      height: 20px;
      font-size: 15px;
      color: #838383;
      font-family: '华文楷体', serif;
      cursor: pointer;
    }
  }

  .post-actions {
    border-top: 1px solid #ebeef5;
    padding-top: 10px;
    .post {
      font-size: 15px;
      font-family: 'serif', '楷体';
      cursor: pointer;
      color: #838383;
      margin-top: 15px;
    }

    .like {
      font-size: 14px;
      float: right;
      position: relative;
      .icon {
        position: absolute;
        left: -80px;
        width: 30px;
        height: 30px;
        color: #646464;
      }
      .num{
        margin-top: 1px;
        position: absolute;
        left: -50px;
        font-size: 15px;
        top: 4px;
      }
    }
  }
}

</style>
